<template>
  <div>
    <el-table
      :key="uid"
      :loading="loading"
      :data="data"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <slot></slot>
      <slot name="options">
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-dropdown @command="handleCommand($event, row)">
              <span class="el-dropdown-link">
                菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item of commandList" :command="item.value" :key="item.value">{{ item.label }}</el-dropdown-item>
                <!-- <el-dropdown-item command="detail">详情</el-dropdown-item>
                <el-dropdown-item command="edit">修改</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
                <el-dropdown-item command="enable">启用</el-dropdown-item>
                <el-dropdown-item command="disable">禁用</el-dropdown-item> -->
              </el-dropdown-menu>
          </el-dropdown>
          </template>
        </el-table-column>
      </slot>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="pagination.PageIndex" :limit.sync="pagination.PageSize" @pagination="getData()" />

    <component :is="componentName" :visible.sync="dialogVisible" title="解决方案" :data.sync="dialogForm" @loading="getData">
    </component>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import { getDataMap, deleteDataMap, enableDataMap, disableDataMap, componentNameMap } from './interfaceConfig';
import { commandList } from '@/utils/config';

import EditSolution from '@/components/DialogComponents/edit-solution';
import SolveQuestion from '@/components/DialogComponents/solve-question';
import EditProduct from '@/components/DialogComponents/edit-product';
import ProductSolveQuestion from '@/components/DialogComponents/product-solve-question';
import EditScene from '@/components/DialogComponents/edit-scene';
import EditPartner from '@/components/DialogComponents/partner';
import SystemSetting from '@/components/DialogComponents/system-setting';
import EditUser from '@/components/DialogComponents/edit-user';
import EditContactInfo from '@/components/DialogComponents/edit-contact-info';
import EditBanner from '@/components/DialogComponents/edit-banner';



export default {
  name: 'search-result',
  components: {
    Pagination,
    EditSolution,
    SolveQuestion,
    EditProduct,
    ProductSolveQuestion,
    EditScene,
    EditPartner,
    SystemSetting,
    EditUser,
    EditContactInfo,
    EditBanner
  },
  props: {
    uid: {
      default: 'search-result',
      type: String,
      required: true
    },
    params: {
      type: [Object, undefined],
      default: undefined
    },
    ignoreCommand: {
      type: [Array, undefined],
      default: () => []
    }
  },
  created() {
    this.getData();
  },
  data() {
    return {
      data: [],
      loading: false,
      total: 0,
      pagination: {
        PageIndex: 1,
        PageSize: 10
      },

      customIgnoreCommand: [],
      componentName: componentNameMap[this.uid],
      dialogVisible: false,
      dialogForm: {},

      // 命令列表
      commandList: commandList.filter(item => !this.ignoreCommand.includes(item.value))
    };
  },
  methods: {
    // 获取数据
    async getData(params) {
      try {
        this.loading = true;
        const nextParams = Object.assign({}, this.params, this.pagination, params);

        const res = await getDataMap[this.uid](nextParams);

        this.data = res.data.data;
        this.total = res.data.count;
      } catch (e) {
        console.log('Search Result Table: uid: ', this.uid, '\n', e);
      } finally {
        this.loading = false;
      }
    },

    // 删除数据
    async handleDelete(row) {
      try {
        this.loading = true;
        let res = await deleteDataMap[this.uid](row);

        this.getData();
        this.$message.success('删除成功');
      } catch (e) {
        console.log('Search Result delete: uid: ', this.uid, '\n', e);
        this.$message.error('删除失败');
      } finally {
        this.loading = false;
      }
    },

    // 启用
    async handleEnable(row) {
      try {
        this.loading = true;
        let res = await enableDataMap[this.uid](row);

        this.getData();
        this.$message.success('启用成功');
      } catch (e) {
        console.log('Search Result Enable: uid: ', this.uid, '\n', e);
        this.$message.error('启用失败');
      } finally {
        this.loading = false;
      }
    },

    // 禁用
    async handleDisable(row) {
      try {
        this.loading = true;
        let res = await disableDataMap[this.uid](row);

        this.getData();
        this.$message.success('禁用成功');
      } catch (e) {
        console.log('Search Result Disable: uid: ', this.uid, '\n', e);
        this.$message.error('禁用失败');
      } finally {
        this.loading = false;
      }
    },

    handleAdd() {
      this.dialogVisible = true;
      this.dialogForm = {};
    },

    handleDetail(row) {
      this.$emit('detail', row);
    },

    handleCommand(command, prevRow) {
      const row = { ...prevRow };

      switch (command) {
        case 'delete':
          this.$confirm('确定要删除这条数据吗？', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.handleDelete(row);
          });
          break;

        case 'edit':
          this.dialogVisible = true;
          this.dialogForm = row;
          this.$emit('edit', row);
          break;

        case 'add':
          this.$emit('add');
          break;

        case 'enable':
          this.handleEnable(row);
          break;
        case 'disable':
          this.handleDisable(row)
          break;
        case 'detail':
          this.handleDetail(row);
          break;
      }
    }
  }
}
</script>
